<template>
  <div>
    <!-- 柱状图 -->
    <div class="histogram" style="width:100%;height:500px;margin-top:30px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  mounted() {
    this.init()
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      myChart: null,
      imgItem: ''
    }
  },
  watch: {
    data: {
      handler(value) {
        this.init()
      }
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        // 柱状图
        const histogram = document.querySelector(".histogram");
        this.myChart = echarts.init(histogram);

        const valeuDate = Object.values(this.data)
        const keys = Object.keys(this.data)

        const option = {
          color: '#3398DB',
          title: {
            text: this.$t('page.sucrose') + this.$t('page.highs'),
            left: 'left'
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          animation: false,
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: [
            {
              type: "category",
              data: keys,
              axisTick: {
                alignWithLabel: true,
              },
              axisLabel: {
                fontSize: 22
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                fontSize: 22
              },
            },
          ],
          series: {
            type: "bar",
            barWidth: "60%",
            data: valeuDate,
          }
        };

        setTimeout(() => {
          this.imgItem = this.myChart.getConnectedDataURL({
            pixelRatio: 2,  // 放大二倍下载
            backgroundColor: '#fff',
          })
          this.$emit('shotImg', this.imgItem)
          // setStore(id, this.imgItem)
        }, 1)
        this.myChart.setOption(option);
      })
    },
    resizeMyChart() {
      this.myChart.resize()
    },
  },
  beforeDestroy () {
    this.myChart.clear()
    window.removeEventListener('resize', this.resizeMyChart)
  },
}
</script>

<style>

</style>